<template>
  <div>
    <div class="detail-box">
      <div class="detail-header">
        <div class="imgbox">
          <img :src="listobj.picUrl||listobj.coverImgUrl" alt width="180" />
        </div>

        <div class="titlebox">
          <div>
            <h1>{{ listobj.name }}</h1>
            <div class="btn-box">
              <el-button icon="el-icon-video-play" size="small" type="danger">播放全部</el-button>
            </div>
            <div class="desc">
              <p class="paragraph" v-html="desc"></p>
            </div>
          </div>
          <div class="count-box">
            <div class="count-item">
              <div class="track-count">
                <div>歌曲数</div>
                <div class="num">{{listobj.trackCount}}</div>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div class="play-count">
                <div>播放数</div>
                <div class="num">{{listobj.playCount | filterCount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="detail-body">
        <div class="mysonglist">
          <el-input
            v-model="keyWords"
            suffix-icon="el-icon-search"
            size="mini"
            placeholder="输入关键字搜索"
          />
          <el-table
            ref="table"
            :data="datalist"
            style="width: 100%"
            stripe
            tooltip-effect="light"
            highlight-current-row
            :row-class-name="getTableRowIndex"
            @row-dblclick="dbclick"
          >
            <el-table-column type="index" :index="getIndex" width="50"></el-table-column>
            <el-table-column label="音乐标题" prop="songname" sortable></el-table-column>
            <el-table-column label="歌手" width="250" show-overflow-tooltip prop="author" sortable></el-table-column>
            <el-table-column label="专辑" width="250" prop="album" show-overflow-tooltip sortable></el-table-column>
            <el-table-column label="时长" width="100" prop="duration" show-overflow-tooltip sortable></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
// import getData from 'common/helper.js'
import { mapMutations } from 'vuex'
export default {
  created () {
    this.loadingInstance = Loading.service({
      lock: true,
      target: ".el-main",
      text: "Loding...",
      spinner: "el-icon-loading"
    })

    this._getDetail(this.$route.query.id)
  },
  data () {
    return {
      listobj: {

      },
      songlist: [],
      keyWords: ""
    }
  },
  methods: {
    dbclick (row) {
      this.setSonglist(this.$refs.table.tableData)
      this.setCurrentIndex(row.index)
    },
    getIndex (idx) {
      return idx >= 9 ? idx + 1 : `0${idx + 1}`
    },
    getTableRowIndex ({ row, rowIndex }) {
      row.index = rowIndex
    },
    _getDetail (id) {
      this.$http.get(`/api/playlist/detail?id=${id}`).then(res => {
        this.listobj = res.data.playlist
        let templist = this.listobj.tracks
        templist.forEach(el => {
          this.songlist.push({
            songname: el.name,
            author: this.$options.filters["authorfilter"](el.ar),
            album: el.al.name,
            duration: this.$options.filters["timefilter"](el.dt),
            songUrl: `https://music.163.com/song/media/outer/url?id=${el.id}.mp3`
          })
        })

        this.$nextTick(() => {
          this.loadingInstance.setText("success")
          this.loadingInstance.close()
        })
      })

    },
    ...mapMutations(['setSonglist', 'setCurrentIndex'])
  },
  computed: {
    desc () {
      let succse = this.listobj.description
      if (succse) {
        let res = succse.replace(/。/g, "。<br />")
        return `简介: ${res}`
      }
      return ''
    },
    datalist () {
      let search = this.keyWords.toLowerCase()
      return this.songlist.filter(el => {
        if (!search || el.songname.toLowerCase().includes(search) || el.author.toLowerCase().includes(search) || el.album.toLowerCase().includes(search)) { return el }
      })
    },
  },
  filters: {
    filterCount (count) {
      let res = parseInt(count / 10000)
      return `${res}万`
    }
  }
};
</script>

<style lang="scss" scoped>
.el-divider {
  height: 2em;
  margin: 2px 8px;
}

.el-input {
  width: 160px;
  left: 410px;
}

.detail-header {
  position: relative;
  height: 260px;
  padding-top: 30px;
  box-sizing: border-box;

  .imgbox {
    position: absolute;
    width: 200px;
    text-align: left;
    top: 30px;
    height: 100%;
  }

  .titlebox {
    width: auto;
    margin-left: 200px;
    height: 100%;
    text-align: left;
    position: relative;

    .btn-box {
      margin: 10px 0px;
    }

    .desc {
      font-size: 14px;
      color: #333;

      .paragraph {
        line-height: 1.5em;
        font-size: 12px;
        overflow: auto;
      }
    }

    h1 {
      position: relative;
      padding-left: 40px;
      font-size: 22px;

      &::after {
        position: absolute;
        left: 0;
        content: '歌单';
        border: 1px solid #ff3300;
        font-size: 12px;
        line-height: 12px;
        color: #ff3300;
        padding: 4px 6px;
      }
    }

    .count-box {
      position: absolute;
      right: 10px;
      top: 0px;
      width: 120px;
      .count-item {
        display: flex;
        text-align: right;

        .play-count,
        .track-count {
          flex: 1;
          font-size: 12px;
          color: #999;

          .num {
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.mysonglist .el-table__body tr.current-row > td,
.mysonglist
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td {
  background-color: rgba($color: #aaa, $alpha: 0.3);
}

.mysonglist
  .el-table--striped
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td,
.mysonglist .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba($color: #aaa, $alpha: 0.3);
  user-select: none;
  color: #000;
}
.el-input--mini .el-input__inner {
  border-radius: 14px;
  padding: 0 10px;
  &:focus {
    border-color: #dcdfe6;
  }
}

.btn-box {
  .el-button--danger {
    background-color: #bb2500;
    border-color: #bb2500;
    width: 120px;
    height: 30px;
    &:hover {
      background-color: #aa2200;
    }
  }
}

.detail-body .el-table td,
.el-table th {
  padding: 5px 0;
}
</style>